<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>14-父子通讯之子传父</title>
</head>
<body>
  <div id="app">
    <h1>vue的例子</h1>
    <p>{{msg}}</p>
    <my-foo></my-foo>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 关闭生产提示
    Vue.component('my-foo',{
      template:`<div>
          <h2>这是一个父组件foo组件</h2>
          <p>儿子这个月的工资:{{salary}}</p>
          <hr>
          <my-son :getData="getSalary"></my-son>
        </div>`,
        data(){
          return {
            salary:''
          }
        },
        methods:{
          getSalary(money){
            this.salary = money
          }
        }
    })
    Vue.component('my-son',{
      template:`<div>
          <h3>这是一个儿子组件</h3>
          <input type="button" value="发工资了" @click="send">
        </div>`,
        data(){
          return {
            salary:20000
          }
        },
        methods:{
          send(){
            // 函数只要被调用，就会回到声明的位置执行内部代码
            this.getData(this.salary)
          }
        },
        props:['getData']
    })
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      }
    })

    /**
     * 子传父:
     * 1. 本质还是父传子 
     * 2. 因为父组件中还是嵌套着子组件，还是可以在父组件中找到子组件，因此可以在当前的子组件上，传递一个有参数的函数体，让子组件在内部进行调用，
     * 3. 从而让父组件可以得到这个数据
     * 
     * 
     * 
     **/ 


    //  函数声明了之后，只有调用的时候才会执行内部代码 
     function fn(n1,n2){
      let sum = n1 + n2 
      return sum
     }
    //  fn(10,20)
  </script>
</body>
</html>